<!doctype html>
<html>
<head>
	
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
	<div id="div1" style="FONT-SIZE: 12px; width: 100%;height: 1800px; MARGIN-RIGHT; position: relative;">
	  <div>探究物体在水中的受力</div>
	  	<div>
	    <button id="btn1">在测力计上捆绑铁块</button>
	  </div>
	  <div id="odiv" style="padding: 2px 8px; FONT-SIZE: 20px;color:white; height: 90px; width: 50px; MARGIN-RIGHT: 5px; position: absolute; display: block; border: 1px solid #666; background:rgba(85,85,85,1.00);">9N
      </div>
	<div style="background-color:rgba(58,168,213,0.5);position: absolute; height: 60%;width: 100%;top:500px"></div>
	</div>
<script type="text/javascript">
	var btn1=document.getElementById('btn1');
	var div=document.getElementById("odiv");
	var div1=document.getElementById("div1");
		document.onmousemove = function (ev) {
			var odiv= document.getElementById("odiv");
            var oEvent = ev || event;
            btn1.onclick=function(){
				document.onmousemove = function (ev) {
                var oEvent = ev || event;
                var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var navtop = oEvent.clientY + scrollTop;
                var navleft = oEvent.clientX + scrollLeft;
                odiv.style.top = navtop + 'px';
                odiv.style.left = navleft + 'px';
				if (navtop<410){
				odiv.innerHTML="9N";
				}else if(navtop>410&&navtop<=500){
					var w = (9-((90-500+navtop)*0.08)).toFixed(2);
				odiv.innerHTML=w+'N';
				}else{odiv.innerHTML='1.8N';}
				};
        };
			
		};
</script>
</body>
</html>
